<!-- 确认订单页面 -->
<template>
  <div class="confirm">
    <ConfirmHeader :address="address"></ConfirmHeader>
    <div class="product-box">
      <ProductCard :data="showProduct"></ProductCard>
    </div>
  </div>
  <ConfirmBottom :total="price" @pay="showConfirm = true"></ConfirmBottom>
  <ConfirmToast v-if="showConfirm" @cancel="handleCancel" @confirm="handleConfirm" @hide="showConfirm = false"></ConfirmToast>
  <SuccessmToast v-if="showSuccess" @quit="handleClose"></SuccessmToast>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute,useRouter } from 'vue-router'
import { get, post } from '@/utils/request'
import { ORDER_LIST } from '@/api/interface'
import ProductCard from '@/components/product/productCard'
import ConfirmHeader from './components/confirmHeader'
import ConfirmBottom from './components/confirmBottom'
import ConfirmToast from './components/confirmToast'
import SuccessmToast from './components/successToast'
// 弹出层样式
const useToast = (router,info,store) => {
  const showConfirm = ref(false);
  const showSuccess = ref(false);
  const handleCancel = () => {
    info.value.isCanceled = true;
    post(ORDER_LIST,info.value)
    .then(()=>{
      store.commit('clear',info.value.shopId)
      router.push({name:'order'})
    })
  }
  const handleConfirm = () => {
    post(ORDER_LIST,info.value)
    .then(()=>{
      store.commit('clear',info.value.shopId)
      showConfirm.value = false
      showSuccess.value = true
    })
  }
  const handleClose = () => {
    router.push({name:'order'});
  }
  return {handleCancel,handleConfirm,handleClose,showConfirm,showSuccess}
}
// 页面展示数据
const useRequest = (store,route) => {
  const info = ref({
    // addressId: 1,  接口返回的数据里面没有，post请求需要
    shopId: '',
    shopName: '',
    isCanceled: false,
    products: [],
  });
  const showProduct = ref({shopName:'',productList:[]})
  const address = ref('');
  const price = ref(route.query.total)
  const productList = store.state.cartList[route.query.id]
  // 处理数据
  for(const item in productList){
    if(productList[item].check){
      showProduct.value.productList.push(productList[item])
      info.value.products.push({id:productList[item]._id,num:productList[item].count})
    }
    else 
      delete productList[item]
  }
  // 发送请求，获取订单列表
  get(ORDER_LIST)
  .then(response => { 
    address.value = response.data[0].address
    info.value.shopId = response.data[0].shopId
    showProduct.value.shopName = info.value.shopName = response.data[0].shopName
  })
  .catch(error => console.log(error))
  return { info,price,showProduct,address }
}
// composition
export default {
  name: 'confirm',
  components:{ConfirmHeader,ProductCard,ConfirmBottom,ConfirmToast,SuccessmToast},
  setup() {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const { info,price,showProduct,address } = useRequest(store,route);
    const {handleCancel,handleConfirm,handleClose,showConfirm,showSuccess} = useToast(router,info,store)
    return { price,showProduct,address,showConfirm,showSuccess,handleCancel,handleConfirm,handleClose }
  }
}
</script>

<style scoped lang="scss">
.confirm{
  background-color: #f8f8f8;
  height: 100%;
  padding-bottom: 49px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .product-box{
    flex: auto;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
